<template>
  <!-- 分类标签 desc 降序 asc 升序-->
  <div class="tags-category">
    <p class="tags-w70"><span>分类:</span></p>
    <ul class="tags-category-list">
      <li :class="categoryIndex === index ? 'active' :''" v-for="(item,index) in isCollapseList1" :key="index" @click="categoryHandler(index,item)">{{item}}</li>
    </ul>
    <div class="tags-is-collapse" @click="isCollapseList1.length > 10 && categoryAll" :class="{'active1':categoryIsCollapse === true}">
      <p>{{categoryIsCollapse ? "收起" : "更多"}}</p>
      <i class="iconfont iconxiala-copy" :class="{'rotate1':categoryIsCollapse === true}"></i>
    </div>
  </div>
</template>

<script>

export default {
  props:{
    // 分类
    categoryList:{
      type:Array,
      // 阻止变量污染
      default:()=>{
        return []
      }
    },
  },
  data () {
    return {
      categoryIndex:0,
      //控制商标索引状态切换标签
      categoryIsCollapse:false,
      //控制品牌是否折叠
      brandIsCollapse:false,
      //控制筛选价格和清空价格的状态
      isControlBg:0,
    }
  },
  methods:{
    // 分类  
    categoryHandler(index,item){
      this.categoryIndex = index;
      if(item === "全部"){
         item = "";
      }
      this.$emit("sendCategoryHandler",item);
  },
    // 控制分类状态切换
    categoryAll(){
      this.categoryIsCollapse = !this.categoryIsCollapse;
    },
  },
  computed:{
    //分类是否折叠
    isCollapseList1(){
      return this.categoryIsCollapse ? this.categoryList : this.categoryList.slice(0,12) 
    },
  },
  mounted(){

  },

}
</script>

<style scoped>
  .tags-category{
    display:flex;
    overflow:hidden;
  }
  .tags-category .active{
    color:#ffffff;
    font-weight: 500;
  }
  .tags-category .active1{
    color:#ffffff;
  }
  .tags-w70{
    width: 70px;
    white-space:nowrap;
    padding-top:18px;
    flex-shrink: 0;
  }
  ul.tags-category-list{
    flex-grow:9;
    min-width:1008px;
    display:flex;
    flex-wrap:wrap;
  }
  ul.tags-category-list li{
    margin:18px 40px 18px 0;
    cursor:pointer;
    transition: all .2s ease;
  }
  ul.tags-category-list li:hover{
   color:#ffffff;
  }

  .tags-is-collapse{
    flex-grow:2;
    display:flex;
    margin-top:18px;
    white-space:nowrap;
    cursor:pointer;
    user-select:none;
  }
  .tags-is-collapse i{
    margin-left: 8px;
    font-size: 26px;
    transition: all ease .5s;
    height: 15px;
    line-height: 15px;
    margin-top: -2px;
  }
  .tags-is-collapse .rotate1{
    transform: rotate(-180deg);
  }
</style>
